<template>
	<div class="commodity" v-if="data">
		<div class="title-btn layout pt20rem pb20rem" v-show="scrollTop < 100">
			<i class="iconfont icon-zuojiantouyuanxing ml30rem" style="color:#bfbfbf" @click="$router.back(-1)"></i>
			<!-- <div class="mr30rem"> -->
				<!-- <i class="iconfont icon-1016fenxiangyuanxing"></i> -->
				<!-- <i class="iconfont icon-gengduo1"  style="color:#bfbfbf"  @click="sheetVisible = true"></i> -->
			<!-- </div> -->
		</div>
		<section class="banner">
			<swiper :data="banner" img-key="pic_cover" :options="bannerOptions">
			</swiper>
			<div class="count-time">
			<countdown :data="data.count_down" :type="countdownType" v-if='data.count_down > 0'></countdown>
			<div class="white pt20rem pb20rem" style="background:rgba(255,0,0,.8)" v-else>活动已过期</div>
			</div>
		</section>
	 	<section class="pl30rem pr30rem pt25rem pb25rem border-b20">
	 		<p class="fs32rem c333 bold ellipsis-more">{{data.goods_name}}</p>
	 		<div class="layout-juscon mt35rem">
				<div class="price">
					<p class="fs40rem red">￥{{ data.price }}</p>
					<del class="fs26rem c999">原价￥{{ data.market_price }}</del>
				</div>
				<div class="fs26rem c666 flex-end layout">
					<i class="mr25rem">总送出：{{ data.help_people }}份</i>
					<i>已有{{ data.yuyue_people }}人参与</i>
				</div>
	 		</div>
	 	</section>
	 	<div class="lottery-rule pl30rem pr30rem pt30rem pb30rem">
	 		<h3 class="fs28rem c333 pb20rem">抽奖规则</h3>
	 		<div class="fs26rem c666" v-html="data.activity_rule"></div>
	 	</div>

		<goods-detail :data="data" v-if="data.rules"></goods-detail>

		<div style="height:3.57142857rem;"></div>

		<footer class="commodity-footer bg-white border-t layout" v-if="detailType == '1'">
			<button class="flexcenter w50 fs30rem c666" @click="$router.back(-1)">
				<i class="iconfont icon-iconfonthome fs45rem"></i>
				<span>更多助力</span>
			</button>
			<button class="flexcenter flex_1 fs30rem cxo-red white" @click="address(data.goods_id,-2)">
				<i class="iconfont icon-wode fs45rem"></i>
				<span>幸运值免费领</span>
			</button>
		</footer>

		<footer class="commodity-footer bg-white border-t layout" v-if="detailType == '3'">
			<router-link tag="button" to="/detail/share-list?type=-4" class="flexcenter w50 fs30rem c666">
				<i class="iconfont icon-tubiao- fs45rem"></i>
				<span>更多分享</span>
			</router-link>
			<button class="flexcenter flex_1 fs30rem cxo-red white" @click="address(data.goods_id,-4)">
				<i class="iconfont icon-wode fs45rem"></i>
				<span>分享有礼</span>
			</button>
		</footer>

		<!-- 规则 -->
		<popup v-model="popupVisible" position="bottom" v-if="ruleData">
			<h2 class="fs38rem align-center border-b pt20rem pb20rem">规则协议<i class="iconfont icon-guanbi" @click=" popupVisible = false "></i></h2>
			<div v-html="ruleData.content">
				
			</div>
			<div class="layout border-t popup-button">
				<span class="fs36rem align-center grey border-r w50" @click=" popupVisible = false ">取消</span>
				<span class="fs36rem align-center green w50" @click="consent">同意</span>
			</div>
		</popup>

		<!-- 模态框 -->
		<section class="modal w100 h100" v-show="modalShow"> 
			<div class="modal-content bg-white">
				<h1 class=" align-center c333 fs36rem bold pt40rem pb40rem">确定收货地址</h1>
				<router-link tag="div" to="#" class="layout bg-f5 pl30rem pr30rem pt50rem pb50rem border-t border-b">
					<div class="text">
						<p class="fs30rem c333 mb30rem bold">请先填写你的地址</p>
						<p class="fs26rem c666">为了方便后期中奖之后需快递商品</p>
					</div>
					<i class="iconfont icon-right2"></i>
				</router-link>
				<p class="fs24rem c999 pl30rem pr30rem pt30rem pb30rem border-b"> 注：提交之后我们会在开奖两天之后公布名单，请注意查看。</p>
				<div class="modal-btn layout align-center border-t" style="border-color:#e5e5e5">
					<span class='w50 border-r fs34rem c999' @click="modalShow = false">取消</span>
					<span class='w50 fs34rem' style="color:#6bdf59">同意</span>
				</div>
			</div>
		</section>
			<!-- 添加地址 -->
		<popup v-model="popupAddress" style="width:90%;" class="circle-8">
			<div class="coupon">
				<h2 class="fs32rem c333 bold align-center border-b pt40rem pb40rem">确定收货地址</h2>
				<router-link tag="div" :to="'/member/address?type='+ type + '&goodsId=' + goods_id" class="address bg-f5 layout pt20rem pb20rem pl30rem pr30rem" v-if="other_list">
					<div class="flex_1 mr10rem">
						<h3 class="bold fs30rem mb10rem c333">商品收货的地址</h3>
						<p class="fs26rem c666 pt10rem pb10rem" v-if="other_address">{{ other_address.username }} <span class="ml20rem fs26rem c666">{{ other_address.moblie }}</span></p>

						<p class="fs26rem c666" v-if="other_address">{{ other_address.pcd_address }}{{ other_address.address }}</p>

						<p class="fs26rem c666 pt10rem pb10rem" v-for="item in other_list" v-if="!other_address && item.is_default=='1'">{{ item.username }} <span class="ml20rem fs26rem c666">{{ item.moblie }}</span></p>
						<p class="fs26rem c666" v-for="item in other_list" v-if="!other_address && item.is_default=='1'">{{ item.pcd_address }}{{ item.address }}</p>
					</div>
					<i class="iconfont icon-right2"></i>
				</router-link>
				<router-link tag="div" :to="'/member/address?type='+ type + '&goodsId=' + goods_id " class="address bg-f5 layout pt20rem pb20rem pl30rem pr30rem" v-else>
					<h3 class="bold fs30rem mb10rem c333">请添加地址</h3>
					<i class="iconfont icon-right2"></i>
				</router-link>
				<!-- <div class="pl30rem pr30rem pt20rem pb20rem">
					<p class="fs26rem c999" style="line-height:150%;">注:系统将在预购体验结束后24小时公布体验幸运名单，请注意查看</p>
					<p class="fs24rem cxo-red-color" style="line-height:150%;">(每天签到,邀请及分享好友体验,可以提升幸运值,提高体验机会)</p>
				</div> -->
				<div class="border-t layout">
					<button class="pt30rem pb30rem border-r w50" @click="popupAddress = false">取消</button>
					<button class="pt30rem pb30rem w50" @click="ensureShare">确定</button>
				</div>
			</div>
		</popup>
	</div>
</template>

<script>
	import { getActivityDetail } from "@/api/goods-detail";
	import { getAddress } from "@/api/address"; 
	import Swiper  from "@/components/Swiper";
	import Countdown from '@/components/Countdown';
	import GoodsDetail from "@/components/Goods-detail"
	import { Popup,MessageBox } from 'mint-ui';
	import Modal from '@/utils/modal';
	import Toast from "@/utils/toast";
	export default{
		components:{
			Swiper,
			Countdown,
			GoodsDetail,
			Popup
		},
		
		mounted()
		{
			window.addEventListener('scroll', this.handleScroll);
		},
		data()
		{
			return{
				countdownType : false,
				modalShow     : false,
				popupVisible  : false,
				popupAddress  : false,
				other_address : null,
				address_id    : '',
				other_list    : [],
				scrollTop     : '',
				data          : [],
				ruleData      : [],
				banner        : [],
				goods_id      : this.$route.params.id,
				type          : this.$route.query.type,
				detailType    : this.$route.query.detailType,
				uid           : window.localStorage.getItem('uid'),
				bannerOptions:{
					slidesPerView :'auto',
					loopedSlides  :'auto',
					autoplay: {
						delay: 5000,
					},
					pagination: {
				    	el: '.swiper-pagination',
				    	bulletClass : 'my-red',
					},
				}
			}
		},
		created()
		{
    		window.scrollTo(0,0);
    		this.loadData();
    		this.loadAddressData();
		},
		methods:
		{
			handleScroll ()	 
			{
			  this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
			},
			loadData()
			{
				var params = {
					goods_id : this.goods_id,
					uid      : window.localStorage.getItem('uid'),
				}
				getActivityDetail(params).then( res => {
					this.data = res.data;
					this.banner = res.data.img_list;
				})
			},
			consent()
			{
				this.popupVisible = false;
				this.modalShow = true;
			},
			address(goodsId,num)
			{
				this.$store.dispatch("goodsId", goodsId);
				this.type = num;
				this.popupAddress = true;
			},
			loadAddressData()
			{
				if(this.showApp)
					return;

				if(this.$store.state.select_address_data){
					this.popupAddress = true;
					this.other_address = this.$store.state.select_address_data;
					this.$store.dispatch('selectAddress',null)
					return;
				}
				getAddress(this.uid).then( res => {
					this.other_list = res.data;
					for(let i in this.other_list){
						if(this.other_list[i].is_default == 1)
						{
							this.address_id = this.other_list[i].id;
							break;
						}
					}
				});
			},
			ensureShare()
			{

				if(!this.address_id) return Toast('请添加地址')

				this.$store.dispatch("addressId", this.address_id);
				if(this.type == '-2')
					this.$router.push("/detail/lottery-detail?goodsId=" + this.goods_id + '&addressId=' +  this.address_id);
				else if(this.type == "-4")
					this.$router.push("/detail/share-detail?goodsId=" + this.goods_id + '&addressId=' + this.address_id);

				// switch(this.type)
				// {
				// 	case '-2':
				// 		this.$router.push("/detail/share-detail?" + 'goodsId=' + this.goods_id + '&addressId=' +  this.address_id);
				// 	return;
				
				// 	case '-4':
				// 		this.$router.push("/detail/share-detail?goodsId=" + this.goods_id + '&addressId=' + this.address_id);
				// 	return;
				// }
				// this.$router.push("/detail/share-detail?" + 'goodsId=' + this.goods_id + '&addressId=' +  this.address_id);
			},
		}
	}
</script>

<style lang="less">
	.commodity{
		.title-btn{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 9;
			i{
				font-size: 60/28rem;
			}
		}
		.banner{
			position:relative;
			.swiper-pagination-bullets{
				bottom:100/28rem !important;
			}
			.count-time{
				position: absolute;
				bottom: 0;
				left:0;
				width: 100%;
				z-index: 99;
				display: block;
				text-align:center;
			}
			.count-down-two{
				height: 80/28rem;
				line-height: 80/28rem;
				background: rgba(255,0,0,.8);
				color: #fff;
				font-size: 34/28rem;
			}
		}
		.ellipsis-more{
			// height: 3.5rem;
		}
		.goods-detail{
			height: 90/28rem;
			line-height: 90/28rem;
			.select-color{
				font-weight: 600;
				color: #333;
				position: relative;
			}
			.select-color:after{
				content: "";
				display: block;
				background-color: #ff0036;
				height: 6/28rem;
				width: 100%;
				position: absolute;
				bottom: -0;
				left: 0;
			}
		}
		.commodity-footer
		{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 9;
			background: #fff;
			height: 100/28rem;
			border-top: 1px solid #e5e5e5;
				button{
					height: 100%;
					i
					{
						vertical-align: middle;
						margin-right: 20/28rem;
					}
				}
		}
		.mint-popup{
			width: 100%;
			h2{
				position: relative;
				i{
					position: absolute;
					right: 10%;
					top: 50%;
					transform: translate(50%,-50%);
				}
			}
			.popup-button{
				height: 100/28rem;
				line-height: 100/28rem;
				span{
					border-right-color: #d7d7d7;
				}
			}
		}
		.modal{
			background-color: rgba(0,0,0,0.5);
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
			.modal-content{
				position: absolute;
				width: 90%;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				border-radius: 16/28rem;
				.modal-btn{
					span{
						height: 100/28rem;
						line-height: 100/28rem;
						border-color: #e5e5e5;
					}
				}
			}
		}
	}
</style> 